<script lang="ts" setup>
import BaseButton from "@/components/BaseButton/index.vue";
import BaseUpDown from "@/components/BaseUpDown/index.vue";
import useSearch from "@/hooks/useSearch";
import useData from "./hooks/useData";
import { useUserStore } from "@/stores/modules/user";

const { pageData, roleMap } = useData();
import { getDataByPage, editData } from "@/api/modules/resource/service";
import UpdateForm from "./components/UpdateForm/index.vue";
import UpdateFormService from "./components/UpdateFormService/index.vue";

const userStore = useUserStore();
const username = computed(() => userStore.userInfo.name);
const { tableData, loadData, formData, reloadData } = useSearch({
  defaultData: {},
  responseKey: {
    list: "result.data",
    total: "result.total"
  }
});

function loadDataCb() {
  loadData({
    api: getDataByPage,
    sendData: {
      pageNum: formData.pageNum - 1,
      pageSize: formData.pageSize
    }
  });
  setTimeout(() => {
    getData();
  }, 1000);
}

loadDataCb();

function reloadDataCb() {
  reloadData();
  loadData({
    api: getDataByPage,
    sendData: {
      pageNum: formData.pageNum - 1,
      pageSize: formData.pageSize
    }
  });
}

loadDataCb();

import { computed, onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import BaseCollapse from "@/components/BaseCollapse/index.vue";

const list = ref([]);
const webData = ref();

function getData() {
  console.log(tableData);
  let arr: any = [];
  tableData.list.forEach(item => {
    if (item[0] != 5) {
      let obj = JSON.parse(item[5]);
      let account = "-";
      let password = "-";
      console.log(obj);
      if (obj?.account) {
        account = obj.account[0]?.user;
        password = obj.account[0]?.password;
      }
      if (obj.srvid == 10) {
        password = obj.requirepass;
      }
      arr.push({
        id: item[item.length - 1].replace("/", ""),
        name: item[1],
        proto: item[2],
        port: item[3],
        grade: item[4],
        account,
        password,
        originData: item,
        srvid: obj.srvid
      });
    }
    if (item[0] == 5) {
      let webArr = JSON.parse(item[5]);
      console.log("web==", webArr);
      webData.value = webArr;
      webArr.app.forEach(val => {
        let priMap = new Map([
          ["1", "低"],
          ["2", "中"],
          ["3", "高"]
        ]);
        arr.push({
          id: val.id,
          name: val.name,
          proto: val.proto,
          port: val.port,
          grade: priMap.get(val.pri.toString()),
          account: "root",
          password: "123456",
          originData: item,
          type: val.type.toString(),
          srvid: webArr.srvid,
          file: val.file
        });
      });
    }
  });
  list.value = arr;
  console.log("  list.value ::", list.value);
}

async function deleteData(item) {
  await ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "danger"
  });
  let arr = item.originData[5];
  arr = JSON.parse(arr);
  arr.app = arr.app.filter(val => val.id != item.id);
  let sendData = {
    id: "5",
    text: arr
  };
  await editData(sendData);
  ElMessage.success("操作成功");
  loadDataCb();
}
</script>

<template>
  <base-up-down>
  <template #up>
    <div class="h-box justify-end mg-b-lg">
      <UpdateForm :webData="webData" @success="loadDataCb()">
        <BaseButton type="add_icon_text">新增服务</BaseButton>
      </UpdateForm>
      <BaseButton @click="reloadDataCb()" type="refresh_icon_text" />
    </div>
  </template>
  <div class="content" style="max-height: calc(100vh - 260px); overflow-y: scroll; overflow-x: hidden">
    <el-row :gutter="20">
      <el-col v-for="item in list" :key="item.id" class="mg-b-sm" :lg="6" :sm="6" :xs="6">
        <el-card>
          <template #header>
            <div class="card-header h-box" style="justify-content: space-between">
              <span>{{ item.name }}</span>
              <div style="font-size: 14px" class="h-box">
                <span>{{ item.proto }}</span>
                <UpdateFormService
                  v-if="item.srvid != 5"
                  @success="loadDataCb"
                  :row-data="item"
                  :title="`更新虚拟服务:${item.name}`"
                >
                  <el-icon class="mg-l-sm" style="cursor: pointer">
                    <Edit />
                  </el-icon>
                </UpdateFormService>
                <UpdateForm v-else @success="loadDataCb" :row-data="item" :title="`更新虚拟服务:${item.name}`">
                  <el-icon class="mg-l-sm" style="cursor: pointer">
                    <Edit />
                  </el-icon>
                </UpdateForm>
                <span @click="deleteData(item)" v-if="item.srvid == 5" style="height: 19px" class="cursor-pointer">
                    <el-icon><Delete /></el-icon
                    ></span>
              </div>
            </div>
          </template>
          <div class="content h-box" style="font-size: 14px; flex-wrap: wrap">
            <div style="width: 50%" class="mg-b-sm">
              <span>端口:</span>
              <span>{{ item.port }}</span>
            </div>
            <div class="mg-b-sm">
              <span>危险等级:</span>
              <span>{{ item.grade }}</span>
            </div>
            <div style="width: 50%">
              <span>用户名:</span>
              <span>{{ item.account }}</span>
            </div>
            <div>
              <span>密码:</span>
              <span>{{ item.password }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  </base-up-down>
</template>
